<template>
  <el-dialog
    title="提示"
    :visible.sync="showRolesAdd"
    width="50%"
    @close="closeRolesAdd"
  >
    <p>用户名：{{ userInfo.username }}</p>
    <p>当前角色：{{ userInfo.role_name }}</p>
    <p>
      分配新角色：
      <el-select v-model="selectRoleId" placeholder="请选择">
        <el-option
          v-for="item in rolesList"
          :key="item.id"
          :label="item.roleName"
          :value="item.id"
        ></el-option>
      </el-select>
    </p>
    <span slot="footer" class="dialog-footer">
      <el-button @click="showRolesAdd = false">取 消</el-button>
      <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'RolesAddDialogo',
  props: {
    userInfo: {
      type: Object,
      default() {
        return {}
      },
    },
    rolesList: {
      type: [],
      default() {
        return []
      },
    },
  },
  data() {
    return {
      showRolesAdd: false,
      //双向绑定的已选中的角色的值
      selectRoleId: '',
    }
  },
  methods: {
    //点击按钮分配角色
    async saveRoleInfo() {
      if (!this.selectRoleId) {
        return this.$message.error('请选择新的角色')
      }

      const { data: res } = await this.$http.put(
        `users/${this.userInfo.id}/role`,
        {
          rid: this.selectRoleId,
        }
      )
      if (res.meta.status !== 200) {
        return this.$message.error('角色更新失败')
      }

      this.$message.success('角色更新成功')
      this.$parent.$parent.$parent.getqueryUsers()
      this.showRolesAdd = false
    },
    closeRolesAdd() {
      this.selectRoleId = ''
    },
  },
}
</script>

<style>
</style>